import styled from 'styled-components'
import Icon from '@/components/Icon'
import { animated } from '@react-spring/web'

export const StyledWrap = styled.div`
	display: flex;
	height: 100%;
	width: 100%;
	.sfu li {
		margin: 0 0 3px 10px;
	}
	.sfu.menu-ul li {
		margin: 0 0 15px 10px;
	}
	.sfu-title {
		text-align: center;
		width: 110px;
		margin-top: 12px;
		font-weight: 700;
		font-size: 14px;
		color: #4e4e4e;
		margin-bottom: 12px;
	}
	.split-line {
		flex: 0 0 20px;
		border-left: 1px solid #dcdfe1;
		position: relative;
	}
	.right-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		.right-tab {
			flex: 0 0 42px;
			align-items: flex-start;
			.kd-tab-item {
				width: 138px;
			}
		}
		.right-body {
			flex: 1;
			overflow-x: hidden;
			position: relative;
			ul.menu-ul {
				display: flex;
				flex-wrap: wrap;
				max-height: calc(100% - 85px);
				overflow-y: auto;
				padding: 0 0 10px 0;
				li > span {
					flex: 0 0 40px;
				}
				li > div {
					text-align: center;
				}
			}
			ul.menu-ul.sfu {
				height: calc(100% - 263px);
				overflow-y: auto;
				li {
					flex: 0 0 92px;
					text-align: center;
				}
			}
			ul.setting-ul {
				display: flex;
				flex-wrap: wrap;
				position: absolute;
				bottom: 9px;
				height: 85px;
				width: 100%;
				border-top: 1px dotted #c6c6c6;
				background: #fff;
				padding-top: 10px;
				li > span {
					flex: 0 0 40px;
				}
				li > div {
					text-align: center;
				}
			}
			ul.setting-ul.sfu {
				height: 234px;
				overflow-y: auto;
				border-top: none;
				li {
					flex: 0 0 92px;
					text-align: center;
				}
			}
		}
	}
`
export const StyledItem = styled.li`
	flex: 0 0 33.3%;
	margin-bottom: 15px;
	display: flex;
	font-size: 12px;
	cursor: pointer;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	&.disable {
		cursor: auto;
		opacity: 0.4;
	}
	.text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
`
export const AnimatedContent = styled(animated.div)`
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	background: #fff;
`
export const IconDrawer = styled(Icon)<{ collapsed: boolean }>`
	height: 41px;
	width: 10px;

	background-position:${(props) => (props.collapsed ? '0px -2478px;' : '-40px -2478px;')}
	&:hover {

		background-position:${(props) => (props.collapsed ? '-10px -2478px;' : '-50px -2478px;')}
	}
	position: absolute;
	top: 50%;
`
export const IconMtAdd = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -0px -1158px;
	&:hover {
		background-position: -40px -1158px;
	}
`
export const IconMtAddAll = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -80px -1158px;
	&:hover {
		background-position: -120px -1158px;
	}
`
export const IconVip = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -560px -1158px;
	&:hover {
		background-position: -600px -1158px;
	}
`
export const IconMute = styled(Icon)<{ on: 0 | 1 }>`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: ${(props) => (props.on ? '-320px -1158px' : '-240px -1158px')};
	&:hover {
		background-position: ${(props) => (props.on ? '-360px -1158px' : '-280px -1158px')};
	}
`
export const IconSilence = styled(Icon)<{ on: 0 | 1 }>`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: ${(props) => (props.on ? '-480px -1158px' : '-400px -1158px')};
	&:hover {
		background-position: ${(props) => (props.on ? '-520px -1158px' : '-440px -1158px')};
	}
`
export const IconMtSelect = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -160px -1198px;
	&:hover {
		background-position: -200px -1198px;
	}
`
export const IconVmp = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: 0px -1198px;
	&:hover {
		background-position: -40px -1198px;
	}
	&.on {
		background-position: -320px -2316px;
		&:hover {
			background-position: -360px -2316px;
		}
	}
`
export const IconMtVmp = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -160px -1238px;
	&:hover {
		background-position: -200px -1238px;
	}
	&.on {
		background-position: -240px -2316px;
		&:hover {
			background-position: -280px -2316px;
		}
	}
`
export const IconMix = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -80px -1198px;
	&:hover {
		background-position: -120px -1198px;
	}
`
export const IconMeetingPoll = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -640px -1158px;
	&:hover {
		background-position: -680px -1158px;
	}
`
export const IconChairmanPoll = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -720px -1158px;
	&:hover {
		background-position: -760px -1158px;
	}
`
export const IconRollcall = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -800px -1158px;
	&:hover {
		background-position: -840px -1158px;
	}
`
export const IconVideoLive = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -400px -1198px;
	&:hover {
		background-position: -440px -1198px;
	}
`
export const IconMeetingVideo = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -720px -1198px;
	&:hover {
		background-position: -760px -1198px;
	}
`
export const IconTvwall = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -240px -1198px;
	&:hover {
		background-position: -280px -1198px;
	}
`
export const IconMtBatchDelete = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -160px -1158px;
	&:hover {
		background-position: -200px -1158px;
	}
`
export const IconMtBatchOffline = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -80px -1238px;
	&:hover {
		background-position: -120px -1238px;
	}
`
export const IconMsg = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -320px -1198px;
	&:hover {
		background-position: -360px -1198px;
	}
`
export const IconBroadcast = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -240px -1238px;
	&:hover {
		background-position: -280px -1238px;
	}
	&.on {
		background-position: -320px -1238px;
		&:hover {
			background-position: -360px -1238px;
		}
	}
`
export const IconVoiceInspire = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -800px -1198px;
	&:hover {
		background-position: -840px -1198px;
	}
`
export const IconRecall = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -720px -1238px;
	&:hover {
		background-position: -760px -1238px;
	}
`
export const IconFileManage = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -160px -2316px;
	&:hover {
		background-position: -200px -2316px;
	}
`
export const IconUpload = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -400px -1238px;
	&:hover {
		background-position: -440px -1238px;
	}
`
export const IconMtRecord = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -400px -1198px;
	&:hover {
		background-position: -440px -1198px;
	}
`
export const IconDataMeeting = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -480px -1238px;
	&:hover {
		background-position: -520px -1238px;
	}
	&.on {
		background-position: -640px -1238px;
		&:hover {
			background-position: -680px -1238px;
		}
	}
`
export const IconMonitor = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: 0px -2316px;
	&:hover {
		background-position: -40px -2316px;
	}
`
export const IconAi = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -0px -2581px;
	&:hover {
		background-position: -40px -2581px;
	}
`
export const IconDelayMeeting = styled(Icon)<{ duration: number }>`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -560px -1198px;
	cursor: ${(props) => (props.duration === 0 ? 'auto' : 'pointer')};
	&:hover {
		background-position: ${(props) => (props.duration === 0 ? '-560px -1198px' : '-600px -1198px')};
	}
`
export const IconDeleteMeeting = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -640px -1198px;
	&:hover {
		background-position: -680px -1198px;
	}
`
export const IconSettingMeeting = styled(Icon)`
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	background-position: -480px -1198px;
	&:hover {
		background-position: -520px -1198px;
	}
`
export const StyledBtn = styled.div`
	display: flex;
	justify-content: center;
	align-items: center;
	height: 23px;
	margin-bottom: 30px;
`
export const StyledNoItem = styled.div`
	width: 100%;
	position: absolute;
	height: 50px;
	top: 35%;
	text-align: center;
	.tips {
		position: relative;
		top: -1px;
		color: #b6b6b6;
		font-size: 13px;
	}
	.link {
		position: relative;
		left: 17px;
		text-decoration: underline;
		color: #2c8dc5;
		top: 9px;
		font-size: 12px;
		cursor: pointer;
	}
`
//info icon
export const IconInfo = styled(Icon)`
	height: 21px;
	width: 24px;
	display: inline-block;
	background-position: 0px -558px;
	position: relative;
	top: 4px;
	margin-right: 6px;
`

export const Wrap = styled.div`
	border: 1px solid #dadada;
	background-color: #fff;
	width: 180px;
	padding: 14px 0;
	font-size: 12px;
	color: #4e4e4e;
	border-radius: 6px;
	.line {
		height: 32px;
		display: flex;
		align-items: center;
		cursor: pointer;
		margin-bottom: 1px;
		.img {
			width: 20px;
			display: flex;
			align-items: center;
			padding-left: 6px;
		}
		&:hover {
			background-color: #1e94da;
			color: #fff;
			.icon {
				background-position: -10px -652px;
			}
		}
	}
`

export const IconToggle = styled(Icon)`
	width: 10px;
	height: 10px;
	background-position: 0 -652px;
`
